@include phoneandtablet {
    .overlay {
        .clk-icon.close {
            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
        }

        > .holder {
            height: 90%; width: 90%;

            > .contents {
                top: $mobileOverlayMargin;
                right: $mobileOverlayMargin;
                bottom: $mobileOverlayMargin;
                left: $mobileOverlayMargin;

                .top-bar {
                    > .title {
                        margin-right: 1.2em;
                    }
                }
            }
        }
    }
}

@include phone {
    .overlay > .holder {
        $m: 0;
        border-radius: $m;
        top: $m;
        right: $m;
        bottom: $m;
        left: $m;
        height: auto; width: auto;
        min-width: 200px; min-height: 200px;
        max-height: 100%; max-width: 100%;
        overflow: auto;
        @include transform(none);

        .editor .form .form-row.l-flex-row  {
            // Display elements in a columnar view
            @include flex-direction(column);
            > .flex-elem {
                &:not(:first-child) {
                    margin-top: $interiorMargin;
                }
                &.label {
                    width: 100%;
                }
                &.controls {
                    overflow: auto;
                }
            }

            &.validates > .label:before {
                position: relative;
                right: auto;
                line-height: inherit;
                margin-right: $interiorMargin;
            }
        }
    }
    .t-dialog-sm .overlay > .holder {
        height: auto; max-height: 100%;
    }
}

@include phonePortrait {
    .overlay > .holder {
        .contents .bottom-bar {
            text-align: center;
        }
    }
}